<template>
    <div class="loan-out-apply">
        <!-- wrapper -->
        <div class="wrapper">
            <div class="loan-detail-header">
                <div class="loan-detail-user">
                    <!-- <span class="loan-detail-user__avatar"><img src="../images/Group.png" alt=""></span> -->
                    <div class="loan-detail-user__info">
                        <p class='name'>李彬</p>
                        <p>出借人</p>
                    </div>
                    <span class="button short transparent" @click="goRouter('user-credit-report-detail')">信用报告</span>
                </div>
                <ul class="loan-detail-money__list">
                    <li class="loan-detail-money__item">
                        <span class='persent'>0.00</span>
                        <p>待收金额</p>
                    </li>
                    <li class="loan-detail-money__item">
                        <span class='persent'>100.00</span>
                        <p>待还金额</p>
                    </li>
                    <li class="loan-detail-money__item">
                        <span class='persent'>12</span>
                        <p>借到次数</p>
                    </li>
                </ul>
            </div>
            <div class="loan-detail-main">
                <div class="loan-detail-number">
                    <p class="loan-detail-number__number">编号: 20170312948213213482</p>
                    <span class="loan-detail-number__status">有效期: 3天</span>
                </div>
                <div class="loan-detail-money">
                    <div class="loan-detail-money__total">
                        <p class='text'>借款总额</p>
                        <span class='number'>500元</span>
                    </div>
                    <ul class="loan-detail-money__list">
                        <li class="loan-detail-money__item">
                            <span class='persent'>2%</span>
                            <p>年化利率</p>
                        </li>
                        <li class="loan-detail-money__item">
                            <span class='persent'>2.00</span>
                            <p>服务费(元)</p>
                        </li>
                        <li class="loan-detail-money__item">
                            <span class='persent'>1.00</span>
                            <p>预计利息(元)</p>
                        </li>
                    </ul>
                </div>
                <div class="loan-detail-info">
                    <ul class="card__info">
                        <li class="card__info-item">借款日期：2017/02/23</li>
                        <li class="card__info-item">借款用途：周转</li>
                        <li class="card__info-item">服务费：5% | 30元</li>
                    </ul>
                    <div class="card__info-item">图片说明：</div>
                    <ul class="loan-detail-info__pics">
                        <li class="loan-detail-info__pic"></li>
                        <li class="loan-detail-info__pic"></li>
                        <li class="loan-detail-info__pic"></li>
                        <li class="loan-detail-info__pic"></li>
                        <li class="loan-detail-info__pic"></li>
                    </ul>
                    <div class="loan-detail-agreement"><span class="button short pure">查看借款协议</span></div>
                </div>
            </div>
        </div>
            
        <!-- footer -->
        <footer class="footer-button">
            <span class="button transparent">拒绝申请</span>
            <span class="button purple" @click='goRepayment'>同意出借资金</span>
        </footer>

        <modal 
            :show='show_modal_loan_detail'
            @close='show_modal_loan_detail = false'>
            <div class='modal-repayment-detail'>
                <div class="modal-repayment-detail__header">
                    <div class='modal-repayment-detail__period'>
                        <p class="period">第2期</p>
                        <p class="time">2017/04/27</p>
                    </div>
                    <p class='modal-repayment-detail__money'>85.00</p>
                </div>
                <ul class="modal-repayment-detail__main">
                    <li class="modal-repayment-detail__item">
                        <p class="key">本金</p>
                        <p class="value">83.33</p>
                    </li>
                    <li class="modal-repayment-detail__item">
                        <p class="key">利息</p>
                        <p class="value">1.67</p>
                    </li>
                    <li class="modal-repayment-detail__item">
                        <p class="key">罚息</p>
                        <p class="value">0</p>
                    </li>
                    <li class="modal-repayment-detail__item">
                        <p class="key">逾期管理费</p>
                        <p class="value">0</p>
                    </li>
                </ul>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        data() {
            return {
                payways:[{
                    value:0,
                    display:'还款方式1'
                },{
                    value:1,
                    display:'还款方式2'
                },{
                    value:2,
                    display:'还款方式3'
                }],
                show_modal_loan_detail:false,
                argeement:true,
                payway:-1,
                payPasswordShow:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            goRepayment(){
                this.$router.push({
                    name:'loan-in-repayment'
                })
            },
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
        },
        created(){
            
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-out-apply{
        .wrapper{
            padding-bottom: 100px;
        }
        .loan-detail-main{
            background-color: #fff;
            margin-top: 16px;
            padding:0 24px;
            position: relative;
        }
        .loan-detail-repayment{
            padding-top: 52px;
        }
        .repayment-tab{
            display: flex;
            background-color: #fff;
        }
        .repayment-tab__item{
            flex:1;
            text-align: center;
            padding:10px 0 8px 0;
            position: relative;
            &:after{
                content:'';
                transition:ease 150ms transform;
                transform:scale(0);
                border-top:2px solid $orange;
                position: absolute;
                bottom:0;
                left:16px;
                right:16px;
            }
            &:active,&.active{
                &:after{
                    transform:scale(1);
                }
            }
            .title{
                @extend %font-title;
                color:$importColor;
            }
            .money{
                @extend %font-caption;
            }
        }
        .repayment-detail{
            text-align: center;
        }
        .repayment-detail__item{
            @extend %font-caption;
            color:$importColor;
            background-color: #fff;
            &.head{
                color:$defaultColor;
                font-weight: 400;
                background-color: transparent;
            }
            display: flex;
            padding: 0 24px;
            border-top:1px solid $sectionColor;
        }
        .repayment-detail__value{
            width: 20%;
            flex:1;
            box-sizing:border-box;
            padding: 14px 0 14px 0;
            &:first-child{
                padding-left: 0;
            }
        }
        .modal-repayment-detail{

        }
        .modal-repayment-detail__header{
            display: flex;
            justify-content: space-between;
            padding-bottom: 8px;
            border-bottom: 1px solid $sectionColor;
        }
        .modal-repayment-detail__period{
            .period{
                @extend %font-body1;
                color:$importColor;
            }
            .time{
                @extend %font-caption;
            }
        }
        .modal-repayment-detail__money{
                @extend %font-title;
                color:$importColor;
        }
        .modal-repayment-detail__main{
            padding-top: 8px;
        }
        .modal-repayment-detail__item{
            padding-top: 8px;
            display: flex;
            justify-content: space-between;
            .key{
                @extend %font-body1;
                color:$importColor;
            }
            .value{
                @extend %font-caption;
            }
        }
    }

</style>
